<template>
  <van-pull-refresh
    v-model="loading"
    @refresh="onRefresh"
    success-text="刷新成功"
  >
    <div class="con_bg">
      <div
        class="bg_white"
        v-for="dynamic in dynamicList"
        :key="dynamic.active_id"
      >
        <div class="content">
          <div class="title">
            <div class="toux">
              <img :src="'http://localhost:8090/' + dynamic.user_image" />
            </div>
            <span class="fts20 ftw name">{{ dynamic.user_name }}</span>
            <div class="guanzhu" @click="tofollow" v-if="showGZ">+关注</div>
          </div>
          <div class="product">
            <span class="fts1">{{ dynamic.active_content }}</span>
            <div class="pic_container" v-if="dynamic.active_image !== ''">
              <img :src="'http://localhost:8090/' + dynamic.active_image" />
            </div>
          </div>
          <div class="time fts1 cgary">
            <span>{{ formattedDate(dynamic.add_time) }}</span>
          </div>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
import { ref } from 'vue'
import { PullRefresh, showToast } from 'vant'
import mine from '@/api/mine'
import moment from 'moment'
import { useRouter } from 'vue-router'
import routerURL from '@/router/routerURL'
export default {
  name: 'DynamicInfo',
  components: {
    [PullRefresh.name]: PullRefresh,
    [showToast.name]: showToast,
  },
  setup() {
    const loading = ref(false)
    const showGZ = ref(true)
    const router = useRouter()
    const dynamicList = ref({})

    //格式化时间
    const formattedDate = () => {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    }
    const onRefresh = () => {
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }
    //关注
    const tofollow = () => {
      const token = window.localStorage.getItem('token')
      if (!token) {
        // 如果本地存储中没有 token，则跳转到登录页面
        showToast('请先登录！')
        router.push({ path: routerURL.LOGIN })
        return
      }
      showToast('关注成功！')
      showGZ.value = false
    }

    mine.getDynamicInfoList().then((res) => {
      if (res.status === 200) {
        dynamicList.value = res.data
      }
    })

    return {
      loading,
      onRefresh,
      showGZ,
      tofollow,
      dynamicList,
      formattedDate,
    }
  },
}
</script>
<style scoped>
.con_bg {
  margin-bottom: 20px;
}
.content {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}
.title {
  height: 60px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
.toux {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
}
.toux img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使用 object-fit 属性确保图像铺满 */
}
.name {
  margin-left: 10px;
}
.guanzhu {
  margin-left: 10px;
  border-radius: 5px;
  background-color: #e69191;
}
.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 文字左对齐 */
}

.pic_container {
  height: 200px;
  width: 100%;
}
.pic_container > img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 自定义样式 */
.fts1 {
  margin-bottom: 10px; /* 文字与图片之间的间距 */
}
.time {
  text-align: right;
}
</style>
